<script setup>
import PostUpload from '@/components/PostUpload.vue'
import HeaderView from '@/views/HeaderView.vue'
import { NBackTop, darkTheme, NMessageProvider } from 'naive-ui'
import { RouterView } from 'vue-router'
import { useStore } from '@/stores/index'
import { ref } from 'vue'

// 当前年份
const currentYear = new Date().getFullYear()
const isLogin = ref(false)  // 是否登录

const store = useStore() // 实例化useStore


// 获取当前用户信息
store.setUserInfo()
if (store.$state.userInfo) {
  isLogin.value = true  // 允许上传
}
</script>

<template>
  <n-message-provider :theme="darkTheme" :duration="2000">
    <!-- 头部 -->
    <header>
      <HeaderView />
    </header>

    <!-- 主体 -->
    <main>
      <RouterView />
    </main>   

    <!-- 底部 -->
    <footer>
      <!-- 返回顶部按钮 -->
      <n-back-top :right="30" :bottom="80" :theme="darkTheme" />
      <!-- 版本信息 -->
      <p id="footer" style="text-align: center">
        <span v-if="isLogin">
          <!-- 上传文章弹窗 -->
          <PostUpload />
        </span>
        <span v-else>
          &copy; {{ currentYear }}
          <a href="https://www.uodrad.top" class="no-underline" style="color: aqua">UODRAD & PYS</a>.
          All rights reserved.
        </span>
      </p>
    </footer>
  </n-message-provider>  
</template>

<style scoped>
.icon-btn {
  font-size: 20px;
  margin-right: 0;
}
header {
  background-color: #3D3B40;
  padding: 12px;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 768px;
  z-index: 1;
  box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.2);
}

footer {
  bottom: 0;
  position: fixed;
  width: 100%;
  max-width: 768px;
  background-color: #3D3B40;
  z-index: 1;
  text-align: center;
  box-shadow: 4px 0px 4px 4px rgba(0, 0, 0, 0.2);
}

main {
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: center;
}

.no-underline {
  color: #52d3d8;
  text-decoration: none;
}
</style>
